<template>
	<div class="field">
		<div class="field-container">
			<input class="input" :value="defaultValue" @input="changeValue" :placeholder="placeholder" :type="type">
		</div>
	</div>
</template>

<script>
export default {
	name: "MyField",
	emits: ['change'],
	props: {
		type: {
			type: String,
			default: "text"
		},
		placeholder: {
			type: String
		},
		value: {},
	},
	data() {
		return {
			defaultValue: this.$props.value
		};
	},
	methods: {
		changeValue(e) {
			console.log("键盘输入", e.target.value)
			// this.$emit('change', e.target.value)
		}
	}
}
</script>

<style lang="scss" scoped>
.field {
	width: 100%;
	padding: 5px;

	.field-container {
		padding: 10px 5px;
		// height: 30px;
		border-bottom: 1px solid rgb(216, 216, 216);

		.input {
			font-size: 14px;
			width: 100%;
			height: 100%;
			border: none;
		}
	}
}
</style>